<template>
  <div px-16rpx mb-200rpx>
    <div>
      <!-- <order /> -->
      <div bg-white p-36rpx v-if="orderInfo">
        <column :res="orderInfo" :price="orderInfo.goodsPrice" :image="orderInfo.image" />
      </div>
    </div>
    <div>
      <div card>
        <div my-20rpx p-36rpx flex flex-a-c flex-j-sb>
          <div font-bold text-26rpx>投诉主题</div>
          <div
            text-24rpx
            @click="reason.show = true"
            :class="[sueForm.complainTopic ? 'color-black' : 'color-warmgray']"
            flex
            flex-a-c>
            {{ sueForm.complainTopic || '请选择投诉主题' }}
            <nut-icon size="12" name="rect-down"></nut-icon>
          </div>
        </div>
      </div>
      <div my-20rpx p-36rpx card flex-a-c flex-j-sb>
        <div font-bold text-26rpx>投诉内容</div>
        <div text-24rpx color-warmgray flex flex-a-c mt-20rpx>
          <nut-textarea
            v-model="sueForm.content"
            :custom-style="{ backgroundColor: colors.bgColor, padding: '20rpx' }"
            :border-bottom="false"
            placeholder="请输入投诉内容" />
        </div>
      </div>

      <div my-20rpx p-36rpx card flex-a-c flex-j-sb>
        <div font-bold text-26rpx>投诉凭证</div>
        <div text-24rpx color-warmgray mt-20rpx flex flex-a-c>
          <uploader
            @success="
              ($event: any) => {
                sueForm.images.push($event)
              }
            "
            @delete="
              ($event: any) => {
                sueForm.images.splice($event, 1)
              }
            "
            :maxNum="5" />
        </div>
      </div>
    </div>
    <submit :loading="loading" title="提交投诉" @click="submitSaleApply" />
    <cancel
      type="COMPLAIN"
      ref="reason"
      @click="
        ($event) => {
          sueForm.complainTopic = $event
          reason.show = false
        }
      "
      :loading="loading"
      title="投诉主题" />
  </div>
</template>

<script setup lang="ts">
import { applyComplain } from '@/api/after-sale'
import { getOrderDetail } from '@/api/order'
import cancel from '@/components/cancel/index.vue'
import column from '@/components/goods-list/column.vue'
import submit from '@/components/sheet-btn/index.vue'
import uploader from '@/components/upload/index.vue'
import { colors } from '@/constants/injection-key'
import { onLoad } from '@dcloudio/uni-app'
const orderInfo = ref<any>('')
const loading = ref<boolean>(false)
const reason = ref<any>(null)
const routerVal = ref<any>(null)
const sueForm = ref<any>({
  complainTopic: '',
  images: [],
  skuId: '',
  goodsId: '',
  content: '',
  orderSn: ''
})

async function init(sn: string) {
  const res = await getOrderDetail(sn)
  if (res.data.success) {
    if (res.data.result.orderItems.length) {
      orderInfo.value = res.data.result.orderItems.find((item: any) => routerVal.value.skuId === item.skuId)
      sueForm.value.goodsId = orderInfo.value.goodsId
    }
  }
}

function handleCheckParams() {
  if (!sueForm.value.complainTopic) {
    uni.showToast({
      title: '请填写投诉主题',
      icon: 'none'
    })
    return false
  }
  if (!sueForm.value.content) {
    uni.showToast({
      title: '请填写投诉内容',
      icon: 'none'
    })
    return false
  }

  return true
}

async function submitSaleApply() {
  //提交申请前检测参数
  if (!handleCheckParams()) {
    return
  }
  loading.value = true
  try {
    const res = await applyComplain(sueForm.value)
    loading.value = false
    if (res.data.success) {
      uni.showToast({
        title: '提交成功',
        icon: 'none'
      })
      setTimeout(() => {
        uni.redirectTo({
          url: '/pages/mine/sue/list'
        })
      }, 500)
    }
  } finally {
    loading.value = false
  }
}

onLoad((options: any) => {
  // 初始化数据
  init(options.sn)
  sueForm.value.orderSn = options.sn
  sueForm.value.skuId = options.skuId
  routerVal.value = options
})
</script>

<style scoped></style>
